<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<image v-if="ktheme == 'black'" class="bg-top" src="/static/index/black/home-bg-black.png" mode="aspectFit">
			</image>
			<!-- 导航及搜索栏 -->
			<view class="sticky">
				<!-- #ifdef APP-PLUS -->
				<!-- <view class="statusbox"></view> -->
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<!-- <view style="margin-top: 40rpx;"></view> -->
				<!-- #endif -->
				<!-- <view class="searchWrap">
					<view class="searchBox">
						<image src="/static/index/icon_search.png" mode="scaleToFill" class="icon"></image>
						<input type="text" class="search_input" v-model="search_name" @confirm="search"
							placeholder="搜索数字科技商品关键词" placeholder-class="color-6">
					</view>
				</view> -->

				<!-- H5下载app -->
				<!-- #ifdef H5 -->
				<!-- 	<view class="downloadApp" v-if="downloadShow">
					<view class="title">下载APP应用获得更好体验！</view>
					<view class="operate">
						<view class="btn" :style="selStyle"  @click="downLoad">下载APP</view>
						<image class="closeIcon" src="/static/index/close.png" mode="scaleToFill"
							@click="downloadShow=false"></image>
					</view>
				</view> -->
				<!-- <view class="downloadApp" v-if="downloadShow">
					<view style="width: 142rpx;
			height: 164rpx;">
					</view>
					<view class="iamge">
						<img class="u-image" src="@/static/index/download.png" style="width: 100%;height: 100%;" alt="">
					</view>
					<view class="title">
						下载APP获得更好体验！
					</view>
					<view class="operate">
						<view class="btn" :style="selStyle" @click="downLoad">下载APP</view>
						<view class="close">
							<image class="closeIcon" src="/static/index/close.png" mode="scaleToFill"
								@click="downloadShow=false"></image>
						</view>
					</view>
				</view> -->
				<!-- #endif -->
			</view>

			<!-- 主体 -->
			<view class="container">
				<!-- 		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
					class="swiperWrap" @change="swiperChange">
					<swiper-item class="swiperWrap" v-for="img,id in slider" :key="id"
						@click="showSliderInfo(img.type, img.val)">
						<image :src="img.img" mode="aspectFill" class="swiperWrap"></image>
					</swiper-item>
				</swiper> -->
				<view class="swiper_class">
					<view class="" v-if="slider.length<2" style="">
						<image :src="singleBanner.image" mode=""
							style="height: 350rpx;margin: 20rpx 0;border-radius: 20px;width: 100%;"></image>
					</view>
					<!-- 左右轮播 -->
					<swiper class="swiper_list" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="5000" :duration="1000">
						<swiper-item v-for="switem,id in slider">
							<view class="swiper-item uni-bg-red">
								<image :src="switem.image"
									:class="ktheme == 'black' ? 'item-border-black': 'item-border-pup'"
									class="sw_image " @click="swiperUrl(switem)" mode=""></image>
							</view>
						</swiper-item>
					</swiper>

					<!-- 上下轮播图 -->
					<!-- <customSwiper v-else :swiper-list="slider" /> -->
				</view>
				<!-- <view class="" style="color:#fff" @click="webview()">
					webview 1
				</view> -->
				<!-- 公告 -->
				<view class="notice_box normal_bg cell-item-ft">
					<view class="notice_show">
						<image src="/static/index/notice_icon2.png" mode="scaleToFill" class="notice_icon"></image>
						<swiper :indicator-dots="false" :circular="true" :vertical="true" :autoplay="true"
							:interval="3000" :duration="1000" class="notice_swiper">
							<swiper-item class="notice_swiper" v-for="item,id in notice_list" :key="id"
								@tap="go_notice_detail(item.id)">
								<view class="notice_text">
									{{ item.title }}
								</view>
							</swiper-item>
						</swiper>
						<image src="/static/index/more2.png" mode="widthFix" style="width: 24rpx;height: 42rpx"></image>
					</view>
				</view>
				<!-- 金刚区 -->
				<!--  --><!-- <view class="menuWrap">
					<view class="item first" @tap="set_tab2(1)">
						<image src="/static/index/menu1.png" mode="scaleToFill"></image>
					</view>
					<view class="more">
						<view class="item" @click="toShop">
							<image src="/static/index/menu2.png" mode="scaleToFill"></image>
						</view>
						<view class="item" @click="toMark">
							<image src="/static/index/menu3.png" mode="scaleToFill"></image>
						</view>
					</view>
				</view> -->
				<view class="option" :style="{'background': (ktheme == 'purple' ? '#ffffff': '#161616')}">
					<template v-for="(item,index) in option_list">
						<view class="option-item" :key="index">
							<image v-if="ktheme == 'purple'" @click="optionClick(item.id,item.url)"
								class="option-item-img" :src="item.img" mode="widthFix">
							</image>
							<image v-if="ktheme == 'black'" @click="optionClick(item.id,item.url)"
								class="option-item-img" :src="item.img1" mode="widthFix">
							</image>
							<view class="" style="margin-top: 10rpx;" :style="{'color': knormalColor}">
								{{item.name}}
							</view>
						</view>
						<!-- </uni-col> -->
					</template>
				</view>
				<!-- 版权分类 -->
				<view class="tab_box">
					<template v-for="(item, index) in tabList">
						<!-- tab点击事件 @tap="set_tab(item.id)" -->
<!--						<view class="tab_dd" :style="item.id == tabCurrent? [selStyle]:[tabNormaleStyle]"-->
<!--							:class="{'tabActive':item.id == tabCurrent}" :key="index">-->
<!--							<text>{{item.name}}</text>-->
<!--						</view>-->

            <view class="tab_dd" :style="item.id == tabCurrent? [selStyle]:[tabNormaleStyle]" :class="{'tabActive':item.id == tabCurrent}" :key="index">
              <img src="/static/index/black/title_left.png">
              <text>{{item.name}}</text>
              <img src="/static/index/black/title_right.png">
            </view>
					</template>
				</view>
				<!-- 版权 -->
				<template v-if="tabCurrent!=3">
					<view class="shop">
						<template v-for="(item, index) in list">
							<view class="item" :style="{'background':(ktheme == 'purple' ? '#ffffff': '#161616')}"
								:key="index" @click="go_detail(item.iid)">
								<image class="backImage" :src="item.image" mode="aspectFit"></image>
								<view class="cover">
									<!-- 已售罄 -->
									<view class="status" v-if="item.isSoldOut">
										<image class="icon" src="/static/index/time-img.png" mode="scaleToFill"></image>
										<text>已售罄</text>
									</view>
									<!-- 未开始 -->
									<view class="star" v-if="!item.isSoldOut && item.time">
										<image class="icon" src="/static/index/time-img1.png" mode="scaleToFill">
										</image>
										<!-- <xwCountDown :is-day="true" :tip-text="' '" :day-text="''" :hour-text="':'" :minute-text="':'"
										:second-text="''" :datatime="item.start_time_strto" @countDown="countDown($event,index)">
									</xwCountDown> -->
										<text :style="{color:knormalColor}">{{item.time}}</text>
									</view>

								</view>

								<view class="info" :class="ktheme == 'black' ? 'black-info' : 'white-info'">
									<view class="title" :style="{color:knormalColor}">{{item.name}}</view>
									<text class="subtitle" :style="{color:knormalColor}">
										限量：{{item.quantity || 0}}份
									</text>
									<view v-if="item.muleNum && item.secondaryNumber && item.secondaryNumber >0">
										<text class="subtitle" :style="{color:knormalColor}">
											进度：{{item.muleNum || 0}}/{{item.secondaryNumber || 0}}
										</text>
									</view>
									<view class="">
										<!-- grade 1：R   2：SR  3：SSR  4：UR -->
										<!-- <view class="grade">
											<text v-if='item.grade===1'>R</text>
											<text v-if='item.grade===2'>SR</text>
											<text v-if='item.grade===3'>SSR</text>
											<text v-if='item.grade===4'>UR</text>
										</view> -->
										<view class="price" :class="ktheme == 'black' ? 'black-price' : 'white-price'">
											<text class="unit" :style="{color:knormalColor}">￥</text>
											<text :style="{color:knormalColor}">{{item.price|fp}}</text>
										</view>
									</view>

								</view>
							</view>
						</template>
					</view>
					<view class="see_more" v-if="hasNextPage" @tap="next_page">
						查看更多
						<n-icon name="right" size="26" color="#A7A8AD"></n-icon>
					</view>
					<!-- <view class="none" v-if='list.length===0'>
						<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto;" alt=""
							mode="widthFix"></image>
					</view> -->
					<view class="none" v-else>没有更多了</view>
				</template>
				<!-- 活动精选 -->
				<template v-else>
					<view class="activities">
						<template v-for="item,index in articleList">
							<view class="item" :key="index"
								@tap="$common.navigateTo('/pages/article/index?id_type=1&id='+item.id)">
								<view class="cover">
									<image :src="item.image" mode="aspectFill"></image>
								</view>
								<view class="title">{{item.brief}}</view>
								<view class="time">{{item.ctime || ''}}</view>
							</view>
						</template>
					</view>

					<view class="see_more" v-if="hasNextPage" @tap="next_article">
						查看更多
						<n-icon name="right" size="26" color="#A7A8AD"></n-icon>
					</view>
					<view class="none" v-if='articleList.length===0'>
						<image src="@/static/without.png" style="width:550rpx;margin: 10rpx auto;" alt=""
							mode="widthFix"></image>
					</view>
					<view class="none" v-else style="border: 1px solid pink;">没有更多了</view>
					<!-- v-else -->
				</template>
			</view>
			<image v-if="ktheme == 'purple'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot.png"
				mode="widthFix"></image>
			<image v-if="ktheme == 'black'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot-black.png"
				mode="widthFix"></image>
			<template>
				<view class="">
					<uni-popup ref="reDialog" type="dialog">
						<uni-popup-dialog :type="tiType" cancelText="关闭" confirmText="跳转" title="提示"
							content="实名认证后才能购买数字科技商品!" @confirm="tiaozhanConfirm"
							@close="tiaozhuanClose"></uni-popup-dialog>
					</uni-popup>
				</view>
				<!-- 	<view style="height: 88rpx;"></view>
				<view class="renzheng_box">
					实名认证后才能购买数字版权
					<view class="go_apply2" :style="selStyle" @tap="go_apply2">
						去实名
					</view> -->
				<!-- </view> -->
			</template>

			<!-- 海报弹框 -->
			<uni-popup ref="posterPopup" type="center">
				<view class="center_poter" v-if="showPoster">
					<!-- posterData： 海报数据 -->
					<poster :posterData="posterData"></poster>
				</view>
			</uni-popup>

			<uni-popup ref="promotion" type="center" :isMaskClick="false">
				<view class="promotion" :style="[selStyle]">
					<view class="text">
						<text class="text1" v-if="showBtns==true">更新</text>
					</view>

					<view class="tips" v-if="showBtns==true">
						有新版本更新，是否现在更新？
					</view>
					<view class="tips" v-else>
						正在更新
					</view>
					<view class="operates" v-if="showBtns==true">
						<block v-if="force_update == 1">
							<view class="tab_btn2" style="width: 100%;" @tap="sure()">
								<text>立即更新</text>
							</view>
						</block>
						<block v-else>
							<view class="tab_btn1" @tap="cancel()">
								<text class="">取消</text>
							</view>
							<view class="tab_btn2" @tap="sure()">
								<text>立即更新</text>
							</view>
						</block>
					</view>
					<view class="operates" v-else>
						<!-- linear-gradient(to right, #FE0058 0%, #FF5B6C 100%) -->
						<cmd-progress :percent="percentage"
							stroke-color="linear-gradient(to right, #673DE7 0%, #c5aeff 100%)">
						</cmd-progress>
					</view>
				</view>
			</uni-popup>
			<view class="scrollClsss" v-if="ifscroll" @click="scrollClick(0)">
				<image src="@/static/user/huojian.png" style="width: 110rpx;" mode="widthFix"></image>
			</view>
			<!-- 底部导航 -->
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		h5Url
	} from '@/config/config.js';
	import tabbar from '@/components/tabbar/tabbar.vue';
	import xwCountDown from '@/components/xw-CountDown';
	import customSwiper from '@/components/blackmonth-swiper/index'
	import poster from '@/components/poster/poster'
	// import webUni from '@/common/uni_webview.js'

	export default {
		components: {
			// tuiLoading,
			customSwiper,
			tabbar,
			xwCountDown,
			poster
		},
		data() {
			return {
				// 稼衣生活token
				jyToken: '',
				isDragging: false,
				current: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				tiType: "",
				fileType: '',
				fileUrl: "",
				ifscroll: false,
				scrollTop: 0,
				avatar: '', // 用户头像
				downloadShow: true,
				index: 0,
				slider: [],
				singleBanner: {},
				notice_list: [],
				current_id: 0,
				current_id2: 0,
				is_auto: true,
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,
				page_c: 1,
				limit_c: 4,
				list_c: [],
				hasNextPage_c: true,
				show_renzheng: false,
				search_name: '',
				downloadUrl: "", //安卓app下载链接
				percentage: 0, //下载进度
				showBtns: true,
				tabCurrent: 1,
				tabList: [{
						id: 1,
						name: '我的资产（00000）',
						img: '/static/index/tab_1.png',
						on_img: '/static/index/tab_1_on.png',
					},
					// {
					// 	id: 2,
					// 	name: '盲盒',
					// 	img: '/static/index/tab_2.png',
					// 	on_img: '/static/index/tab_2_on.png',
					// },
				],
				/**
				 * , {
					id: 2,
					name: '盲盒',
					img: '/static/index/tab_2.png',
					on_img: '/static/index/tab_2_on.png',
				}{
						id: 2,
						name: '市场交易',
						img: '/static/index/TB03.jpg',
						img1: '/static/index/black/home-market-black.png',
						url: '/pages/mart/mart',
					},
				 */

				showPoster: false,
				posterData: {
					// 背景
					bgImage: '/static/images/headIcon.jpg',
					// 商品链接
					url: 'https://www.apple.com.cn/iphone/'
				},
				option_list: [{
						id: 0,
						name: '软件下载',
						img: '/static/index/TB04.jpg',
						img1: '/static/index/black/home-down-black.png',
						url: '/pages/index/download', ///pages/user/accredit/accredit  弹框 shouquan 当界面将展示授权工厂信息
					},
					{
						id: 1,
						name: '邀请好友',
						img: '/static/index/home-jy.png',
						img1: '/static/index/black/home-jy-black.png',
						url: 'share',
						// url: 'https://test-jy-life.zhongfujiayi.com',
					},
				
					{
						id: 2,
						name: '邀请记录',
						img: '/static/index/TB03.jpg',
						img1: '/static/index/black/user-profit-black.png',
						url: '/pages/user/invite/invite',
					},
					{
						id: 3,
						name: '邀请返佣',
						img: '/static/index/TB04.jpg',
						img1: '/static/index/black/home-down-black.png',
						url: '/pages/index/download', ///pages/user/accredit/accredit  弹框 shouquan 当界面将展示授权工厂信息
					},
					{
						id: 4,
						name: 'NFC 鉴伪',
						img: '/static/index/TB05.jpg',
						img1: '/static/index/black/home-drink-black.png',
						url: '/pages/free/activity',
					},
					{
						id: 5,
						name: '金界直播', //  '衍生品奖励',
						img: '/static/index/djb_purple.jpg',
						img1: '/static/index/black/djb_black.png',
						url: '' // '/pages/user/point/point',
					},
					{
						id: 6,
						name: '猜金涨跌',
						img: '/static/index/TB09.png',
						img1: '/static/index/black/user-ai-black.png',
						url: '/pages/aipicture/aipicture',
					},
					// {
					// 	id: 4,
					// 	name: '抽奖活动',
					// 	img: '/static/index/TB05.jpg',
					// 	img1: '/static/index/black/home-award-black.png',
					// 	url: '', ///pages/user/settings/drawAaffle/index
					// },
					//
					{
						id: 7,
						name: '兑换商城',
						img: '/static/index/TB08.jpg',
						img1: '/static/index/black/home-share-black.png',
						// url: '/pages/user/invite/share',
						url: 'https://test-jy-life.zhongfujiayi.com'
					},
				],
				interval_list: [],
				hasLogin: false,
				articleList: [], //活动精选
				iflogen: '',
				// 安卓是否强制更新：is_qz_update 1：强制  0不强制
				force_update: 0,
			}
		},
		onLoad(options) {
			this.jyToken = options.token || ''
			this.$store.commit('ifhuifu', 0)
			this.query();
			this.init();
			this.jyTozwLogin()
		},
		mounted() {},
		created() {
			this.reloadHome()
		},
		onShow() {

			let token = this.$db.get('userToken');
			if (token) {
				this.hasLogin = true;
				this.requestUserAccount()
			} else {
				this.hasLogin = false
				this.show_renzheng = true;
			}
			// //杉德
			// let ifAIsd=uni.getStorageSync('ifAIsd')

			// console.log("-ifAIsd-",ifAIsd);
			// if (ifAIsd == 'ifAIsd') {
			// 	let messageType = uni.getStorageSync('messageType')
			// 	// let aiEventId = uni.getStorageSync('aiEventId')
			// 	if(messageType == 'ai'){
			// 		uni.navigateTo({
			// 		url:'/pages/aipicture/aipicture?messageType='+messageType
			// 	  	})
			// 		uni.removeStorageSync('messageType','')
			// 		uni.removeStorageSync('ifAIsd','')
			// 		// uni.removeStorageSync('aiEventId','')
			// 	}
			// }

			// let messageType = uni.getStorageSync('messageType')
			// // let aiEventId = uni.getStorageSync('aiEventId')
			// if(messageType == 'ai'){
			// 	uni.navigateTo({
			// 	url:'/pages/aipicture/aipicture?messageType='+messageType
			//   	})
			// 	uni.removeStorageSync('messageType','')
			// 	// uni.removeStorageSync('aiEventId','')
			// }
			this.reloadHome()
		},
		//滑动显示火箭返回顶部
	/* 	onPageScroll(e) {
			if (this.scrollTop >= 230) {
				this.ifscroll = true
			} else {
				this.ifscroll = false
			}
			this.scrollTop = e.scrollTop;
		}, */
		onPullDownRefresh() {
			this.clear();
			this.init();
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		methods: {
			// 登录稼衣生活
			jyTozwLogin() {
				let _this = this
				if (this.jyToken) {
					this.$api.jyLoginByToken({
						token: this.jyToken
					}, res => {
						if (res.data) {
							_this.$db.set('userToken', res.data.token);
						}
					})
				}
			},
			reloadHome() {
				//h5发送消息
				// #ifdef H5
				setTimeout(() => {
					this.$webUni.postMessage({
						data: {
							action: "reloadHome",
						},
					});
				}, 1000)
				// #endif
			},
			requestUserAccount() {
				this.$api.userAccount({}, res => {
					if (res.status) {
						this.show_renzheng = res.data.isCertified;
						if (!this.show_renzheng) {
							setTimeout(() => {
								this.$refs.reDialog.open()
							}, 1000);
						}
					}
				})
			},
			onSwiperTouchMove(e) {
				this.isDragging = true; // 标记为正在拖动
				// 在这里可以添加额外的逻辑来处理3D效果，比如根据拖动的方向调整swiper-item的transform
			},
			swiperChange2(e) {
				this.current = e.detail.current;
			},
			//轮播图跳转
			swiperUrl(val) {
				let url = val.url;
				// #ifdef H5
				window.location.href = url;
				// #endif
				// #ifdef APP-PLUS
				if (url.includes('free/activity')) {
					if (!(this.$db.get('userToken'))) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
					uni.navigateTo({
						url: '/pages/free/activity'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/webview/webview?url=' + url
					})
				}
				// #endif
				// const param = {url: val.url };
				// uni.navigateTo({
				// 	url: '/pages/web/index?param=' + encodeURIComponent(JSON.stringify(param))
				// });
			},
			swChange(idx) {
				// console.log("当前中间图片的下标为：" + idx)
			},
			//生成海报
			openPoster() {
				if (!(this.$db.get('userToken'))) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.showPoster = false
				uni.showLoading({
					title: '海报绘制中..'
				})
				this.$api.userInfo({}, res => {
					if (res.status) {
						let profile = res.data;
						let qrUrl = h5Url + '#/pages/login/register?invitecode=' + profile.uid;
						let posterbg = ''
						// 修改海报背景
						if (this.ktheme == 'black') {
							posterbg = '../../static/poster_black.png';
						} else {
							posterbg = require('../../static/poster.jpg');
						}
						this.posterData = {
							bgImage: posterbg,
							url: qrUrl
						}
						this.$refs.posterPopup.open()
						setTimeout(() => {
							uni.hideLoading()
							this.showPoster = true
						}, 400)
					}
				})
			},
			//关闭海报
			hidePoster() {
				this.$refs.posterPopup.close()
			},
			optionClick(id, url) {
				if (id == 5 && !url) {
					// https://zwsl-duanjubao.yeeverse.top/
					this.$api.getYeepayDjb(res => {
						console.log('res----',res)
						if (res.status) {
							var url = res.data
							// #ifdef H5
							window.location.href = url;
							// #endif
							// #ifdef APP-PLUS
							uni.navigateTo({
								url: '/pages/user/webview/webview?url=' + url
							})
							// #endif
						}else{
							uni.showToast({
								title: '敬请期待...',
								icon: 'none'
							});

						}
					})
					return;
				}
				if (!url) {
					uni.showToast({
						title: '敬请期待...',
						icon: 'none'
					});
					return;
				}
				if ('shouquan' === url) {
					uni.showToast({
						title: '当前界面将展示授权工厂信息',
						icon: 'none'
					});
					return;
				}
				if (url == 'share') {
					// #ifdef H5
					if (!(this.$db.get('userToken'))) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
					uni.navigateTo({
						url: `/pages/index/save-poster`
					})
					// #endif
					// #ifdef APP-PLUS
					// iOS ｜ Android
					this.openPoster()
					// #endif
					return
				}
				if (id === 1 || id === 5) {
					let hrefUrl = ''
					if (id === 1) {
						// 傢依生活
						let token = this.$db.get('userToken')
						if (!token) {
							hrefUrl = url
						} else {
							hrefUrl = url + `?token=${token}`
						}
					} else {
						hrefUrl = url
					}
					// #ifdef H5
					window.location.href = hrefUrl;
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(hrefUrl)
					// #endif

					/**
					 * else if (id === 2) {
					uni.switchTab({
						url: '/pages/mart/mart'
					});
				}
					 */
				} else {
					if (this.$db.get('userToken')) {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			},
			scrollClick(val) {
				uni.pageScrollTo({
					scrollTop: val,
					duration: 100,
				})
				this.scrollTop = val
			},
			init() {
				this.getBanner();
				this.getNotice();
				this.get_data_list();
				// this.get_articleList()
			},
			getBanner() {
				let data={
					type:1,
				}
				this.$api.getBanner(data, (res) => {
					let data = res.data
					if (data && data.length == 1) {
						this.singleBanner = data[0]
					} else {
						this.slider = res.data
					}
				});
			},
			getNotice() {
				this.$api.notice({}, res => {
					this.notice_list = res.data
				});
			},
			countDown(e, index) {
				// this.list[index].status = 1
			},
			toShop() {
				uni.navigateTo({
					url: '/pages/shop/index'
				});
			},
			toMark() {
				uni.switchTab({
					url: '/pages/mart/mart'
				});
			},
			transition_hanlde: function(e) {

			},
			change: function(e) {
				this.current_id = e.detail.current
				//如果是用户touch  则暂停自动轮播 20s后恢复
				if (this.is_auto) {
					this.is_auto = e.detail.source != 'touch'
					if (!this.is_auto) {
						setTimeout(() => {
							this.is_auto = true;
						}, 20000)
					}
				}
			},
			/***更新**/
			//查询当前版本号
			query() {
				// this.updateHandler('Android', '1.1.5.3');
				//#ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					var version = wgtinfo.version //客户端版本号
					//检测当前平台，如果是安卓则启动安卓更新
					uni.getSystemInfo({
						success: res => {
							this.updateHandler(res.platform, version);
						}
					})
				})
				//#endif
			},
			//实名去实名
			tiaozhanConfirm() {
				uni.navigateTo({
					url: "/pages/user/apply/apply"
				})
				this.$refs.reDialog.close()
			},
			tiaozhuanClose() {
				this.$refs.reDialog.close()
			},
			//检测是否需要更新
			async updateHandler(platform, version) {
				let data = {
					platform: platform,
					version: version
				}
				let _this = this;
				this.$api.getAppVersion(data,
					res => {
						if (res.status && res.data.version) {
							const info = res.data;
							_this.force_update = info.is_qz_update
							if (info.version !== '' && info.version > version) {
								console.log('更新版本')
								this.downloadUrl = res.data.download_url
								this.$refs.promotion.open();
							} else {
								console.log('当前已是最新版本')
							}
						}
					}
				)
			},

			//确认更新
			sure() {
				//关闭按钮
				this.showBtns = false;
				let sys = uni.getSystemInfoSync().platform //检查系统
				if (sys == 'ios') {
					// this.getIosInfo()
				} else if (sys == "android") {
					this.updateAPP() // 调用下载方法app内下载
				}
			},
			//取消更新
			cancel() {
				this.$refs.promotion.close();
			},
			//链接苹果商店下载
			getIosInfo() {

			},
			//安卓更新
			updateAPP() {
				let _this = this;
				let url = this.downloadUrl;
				console.log(this.downloadUrl)
				// 官方API
				var dtask = plus.downloader.createDownload(url, {}, function(d, status) {
					//d为下载的文件对象
					if (status == 200) {
						//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
						var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
						plus.runtime.openFile(d.filename); //选择软件打开文件
						uni.showToast({
							icon: 'none',
							title: '更新成功'
						})
					} else {
						//下载失败
						plus.downloader.clear(); //清除下载任务
						_this.$refs.promotion.close();
						uni.showToast({
							icon: 'none',
							title: '更新失败'
						})
					}
				})
				setTimeout(function() {
					//监听下载进度
					dtask.addEventListener('statechanged', function(task) {
						_this.percentage = parseInt(
							(parseFloat(task.downloadedSize) /
								parseFloat(task.totalSize)) *
							100
						);
						if (_this.percentage == 100) {
							_this.$refs.promotion.close();
						}
						// console.log('下载进度：' + _this.percentage)
					})
					//开始下载
					dtask.start();
				}, 1000)
			},

			// 下载app
			downLoad() {
				if (this.$store.state.config && this.$store.state.config.android_down_url) {
					let url =
						'https://jt.zhongfujiayi.com/download';
					// #ifdef H5
					window.location.href = url;
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(url) //不需要拼接
					// #endif
				} else {
					this.$common.errorToShow('无法下载');
				}
			},

			/**更新end**/
			swiperChange: function(e) {
				this.index = e.detail.current;
			},

			set_tab2(id) {
				uni.pageScrollTo({
					scrollTop: 400,
					duration: 0,
				})
				let item = this.tabList[id]
				this.tabCurrent = item.id;
				this.get_data_list()
			},
			set_tab: function(id) {
				this.tabCurrent = id
				this.get_data_list()
			},
			go_btn: function(id) {
				let item = this.notice_btn_list[id];
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				} else {
					this.$common.errorToShow('暂未开放')
				}
			},

			search: function(e) {
				let key = e.detail.value;
				uni.navigateTo({
					url: 'search_list?key=' + key
				});
			},

			showSliderInfo(type, val) {
				console.log(type, val)
				if (!val) {
					return;
				}
				if (type == 1) {
					if (val.indexOf('http') != -1) {
						// #ifdef H5
						window.location.href = val
						// #endif
						// #ifndef H5
						uni.navigateTo({
							url: '/pages/webview/index.vue?src=' + val
						})
						// #endif
					}
				} else if (type == 2) {
					// 商品详情
					this.go_detail(val)
				} else if (type == 3) {
					// 文章详情
					this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
				} else if (type == 4) {
					// 文章列表
					// this.$common.navigateTo('/pages/article/list?cid=' + val)
				} else if (type == 5) {
					//智能表单
					// this.$common.navigateTo('/pages/form/detail/form?id=' + val)
				} else if (type == 6) {
					this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=2')
				}
			},
			go_apply2: function() {
				uni.navigateTo({
					url: '../user/apply/apply'
				})
			},

			go_detail: function(id) {
				let token = this.$db.get('userToken')
				if (this.$db.get('userToken')) {
					uni.navigateTo({
						url: 'details?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			go_notice_detail: function(id) {
				this.$common.navigateTo('/pages/article/index?id=' + id + '&id_type=2')
			},
			get_articleList() {
				this.hasNextPage = true;
				this.articleList = []
				this.page = 1;
				let data = {
					type_id: 4,
					page: this.page,
					limit: this.limit
				}
				this.$api.article(data, res => {
					if (res.status) {
						this.articleList = res.data;
						this.hasNextPage = res.data.length >= this.limit
					}
				})
			},
			next_article() {
				if (this.hasNextPage) {
					let new_page = this.page + 1;
					let data = {
						page: new_page,
						limit: this.limit
					}
					this.$api.article(data, res => {
						if (res.status) {
							this.articleList = this.articleList.concat(res.data);
							this.hasNextPage = res.data.length >= this.limit;
							this.page = new_page
						}
					})
				}
			},
			get_data_list: function() {

				this.hasNextPage = true;
				this.list = []
				this.page = 1;

				let data = {
					pageNo: this.page,
					// limit: this.limit,
					type: this.tabCurrent,
					goods_cat_id: this.tabCurrent
				}
				for (let i = 0; i < this.interval_list.length; i++) {
					clearInterval(this.interval_list[i])
				}
				this.$api.getIndexData(data, res => {
					if (res.status) {
						this.list = res.data;
						let nowTime = new Date().getTime(); //获取当前时间
						for (let i = 0; i < this.list.length; i++) {
							let item = this.list[i];
							if (item.buyTime < nowTime) {
								continue;
							}
							let timeleft = (item.buyTime - nowTime) / 1000;
							this.list[i].time = '距离开售还有' + this.$common.time2date(timeleft);
							this.interval_list[i] = setInterval(() => {
								let timeleft_ = timeleft--
								this.list[i].time = '距离开售还有' + this.$common.time2date(timeleft_);
								this.list[i].start_time_strto = timeleft_;
								// this.list[i].time = this.list[i].time;
								this.$forceUpdate()
								if (timeleft < 0) {
									this.list[i].time = '00:00:00';
									clearInterval(this.interval_list[i])
								}
							}, 1000)

						}
						this.hasNextPage = res.data.length >= this.limit
					}
				})
			},
			next_page: function() {
				if (this.hasNextPage) {
					let new_page = this.page + 1;
					let data = {
						pageNo: new_page,
						type: this.tabCurrent,
						// limit: this.limit,
						goods_cat_id: this.tabCurrent
					}
					this.$api.getIndexData(data, res => {
						if (res.status) {
							this.list = this.list.concat(res.data);
							let nowTime = new Date().getTime(); //获取当前时间
							for (let i = 0; i < this.list.length; i++) {
								let item = this.list[i];
								if (item.buyTime < nowTime) {
									continue;
								}
								let timeleft = (item.buyTime - nowTime) / 1000;
								this.list[i].time = '距离开售还有' + this.$common.time2date(timeleft);
								this.interval_list[i] = setInterval(() => {
									let timeleft_ = timeleft--
									this.list[i].time = '距离开售还有' + this.$common.time2date(timeleft_);
									this.list[i].start_time_strto = timeleft_;
									// this.list[i].time = this.list[i].time;
									this.$forceUpdate()
									if (timeleft < 0) {
										this.list[i].time = '00:00:00';
										clearInterval(this.interval_list[i])
									}
								}, 1000)

							}
							this.hasNextPage = res.data.length >= this.limit;
							this.page = new_page
						}
					})
				}
			},
			webview() {
				uni.navigateTo({
					url: '/pages/user/webview/webview?url=http://localhost:9901/wap/#/pages/index/index/'
				})
			},
			clear: function() {
				for (var i = 0; i < this.interval_list.length; i++) {
					console.log(123, this.interval_list[i])
					clearInterval(this.interval_list[i])
				}
			},
		},
		onUpload() {}
	}
</script>

<style lang="scss">
	/deep/.uni-dialog-title-text {
		color: orange !important;
		font-size: 39rpx;
	}

	/deep/.uni-dialog-content-text {
		font-size: 35rpx;
	}

	.none {
		margin: 30rpx auto;
		font-size: 24rpx;
		color: #666;
		width: 100%;
		text-align: center;
		margin-right: 12rpx;
	}

	.see_more {
		margin: 30rpx auto;
		width: 151rpx;
		height: 46rpx;

		background: #F2F2F4;

		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;

		color: #141519;
	}

	.notice_box {
		width: 100%;
		height: 80rpx;
		background-color: rgba(16, 16, 16, 1);
		border-radius: 50rpx;
		padding: 0 30rpx;
		margin: 20rpx 0;

		.notice_show {
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.6);

			.notice_icon {
				width: 45rpx;
				height: 45rpx;
				margin-right: 30rpx;
			}

			.notice_swiper {
				flex: 1;
				height: 37rpx;
				font-size: 26rpx;
				color:rgba(255, 255, 255, 0.6);
				display: flex;
				align-items: center;

				.notice_text {
					width: 550rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}


	}

	.swiperWrap {
		width: 100%;
		height: 360rpx;
		border-radius: 30rpx;
	}

	.container {
		width: 100%;
		padding: 0 40rpx;
		position: relative;
		z-index: 2;
	}

	.tab_btn text {
		position: relative;
		z-index: 2;
		line-height: 1;
		font-size: 28rpx;
		color: #EEDCAA;
	}

	.tab_on2 text {
		color: #50370B !important;
	}
</style>

<style lang="scss" scoped>
	.sticky {
		width: 100%;
		padding-top: var(--status-bar-height);
		padding-bottom: 20rpx;
		position: relative;
		z-index: 2;

		.statusbox {
			height: var(--status-bar-height);
		}

		.user-hello {
			width: 100%;
			padding: 30rpx 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.welcome {
				color: #333;

				.title {
					width: 138rpx;
					height: 28rpx;
					display: block;
				}

				.text {
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 6rpx;
				}
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					display: block;
				}
			}
		}

		.searchWrap {
			width: 100%;
			padding: 0 40rpx;

			.searchBox {
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-radius: 50rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 29rpx;
					height: 31.75rpx;
				}

				.search_input {
					flex: 1;
					height: 80rpx;
					padding-left: 20rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		@keyframes bounce {

			//上下
			// 0% { transform: translateY(-100%); }
			// 70% { transform: translateY(10%); }
			// 100% { transform: translateY(0); }
			//左右
			// 0% {
			// 	transform: translateX(0);
			// }

			20% {
				transform: translateX(-10px);
			}

			// 40% { transform: translateX(10px); }
			// 60% { transform: translateX(-10px); }
			80% {
				transform: translateX(10px);
			}

			100% {
				transform: translateX(0);
			}
		}

		.bounce-enter-active {
			animation-fill-mode: both;
		}

		.bounce-leave-active {
			animation-fill-mode: both;
		}

		.downloadApp {
			width: 662rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 55rpx auto 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.iamge {
				position: absolute;
				bottom: 0;
				left: -20rpx;
				width: 162rpx;
				height: 164rpx;
				animation: bounce 0.8s;
			}

			.title {
				font-size: 28rpx;
				color: #000000;
				font-weight: 400;
			}

			.operate {
				display: flex;
				align-items: center;

				.btn {
					border-radius: 28rpx;
					width: 130rpx;
					height: 52rpx;
					background: var(--buttonBcak);
					// background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
					text-align: center;
					line-height: 52rpx;
					font-size: 26rpx;
					color: #fff;
					font-weight: 400;
				}

				.close {
					height: 100rpx;
					width: 30rpx;
					margin: 12rpx;
					padding-top: 13rpx;

				}

				.closeIcon {
					width: 22rpx;
					height: 22rpx;
					display: block;

				}
			}
		}
	}

	.shake-enter-active,
	.shake-leave-active {
		animation: none;
	}

	.tab_box {
    margin-top: 50rpx;
		width: 100%;
		//padding: 30rpx 70rpx 0;
		display: flex;
		align-items: center;
		// justify-content: space-between;

		justify-content: space-around;

		.tab_dd {
      display: flex;
      align-items: center;
      justify-content: space-around;
			font-size: 32rpx;
			color: var(--tabNormalColor);
			font-weight: 400;
			position: relative;
      img {
        width: 170rpx;
        height: 11rpx;
      }
      text {
        margin: 0 20rpx;
      }
		}

		.tabActive {
			// color: #863A3A;
			color: var(--selectColorSize);
			font-weight: bold;
		}

		.tabActive::after {
			//display: block;
			//clear: both;
			//content: '';
			//width: 65%;
			//height: 10rpx;
			//// background:red;
			//background: var(--selBcakborder);
			//border-radius: 100rpx;
			//position: absolute;
			//left: 50%;
			//bottom: -16rpx;
			//transform: translateX(-50%);
		}
	}

	.tab_btn2 {
		width: 188rpx;
		height: 75rpx; //	height: 50rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx; // 24rpx;
		color: #fff;
		float: right;
		line-height: 1;
		background: var(--buttonBcak); //linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
		border-radius: 50rpx;
	}

	.tab_btn1 {
		width: 188rpx;
		height: 75rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx; // 24rpx;
		color: var(--selectColorSize); // #FF5B6C;
		float: right;
		line-height: 1;
		border-radius: 50rpx;
		border: var(--borderSty); // 1rpx solid #FF5B6C;
	}


	.promotion {
		// width: 450rpx;
		// border-radius: 20rpx;
		// padding: 30rpx 20rpx;
		// background-color: #fff;
		// border: 2rpx solid #FF5B6C;
		width: 636rpx;
		height: 400rpx;
		background: #F8F6FF;
		border-radius: 32rpx;
		text-align: center;

		.text {
			width: 604rpx;
			height: 118rpx;
			margin: auto;
			line-height: 108rpx;
			text-align: center;

			.text1 {
				font-size: 48rpx;
				width: 104rpx;
				height: 108rpx;

				line-height: 108rpx;
				// 字体渐变
				background: var(--buttonBcak);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.tips {
			// width: 100%;
			// padding-bottom: 40rpx;
			// font-size: 26rpx;
			// color: #333;
			width: 634rpx;
			height: 148rpx;
			text-align: center;
			font-size: 38rpx;
			line-height: 58rpx;
			// 字体渐变
			color: #000;


		}
	}

	.operates {
		margin: 20rpx auto;
		width: 600rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.menuWrap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.item {
			width: 360rpx;
			height: 110rpx;

			image {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 30rpx;
			}
		}

		.item.first {
			width: 290rpx;
			height: 240rpx;
		}

		.more {
			width: 360rpx;

			&>view:last-child {
				margin-top: 20rpx;
			}
		}
	}

	.option {
		width: 100%;
		height: 364rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 20rpx;
		display: flex;
		// flex-direction: column-reverse;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: stretch;
		// justify-content: center;
		// align-items: center;
		// justify-content: space-between;
		// justify-content: space-around;

		.option-item {
			width: 140rpx; //140
			height: 140rpx;
			color: #333;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.option-item-img {
				width: 100rpx;
				height: 90rpx;
				// margin-bottom: 15rpx;
			}
		}
	}

	.shop {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 50rpx;

		.item {
			// width: 325rpx;
			width: 48%;
			height: 480rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 30rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(156, 156, 156, 0.6);
			position: relative;

			.backImage {
				position: absolute;
				width: 100%;
				// height: 100%;
				z-index: 0;
				border-radius: 20rpx;
				display: block;
			}

			.cover {
				width: 100%;
				position: relative;
				z-index: 1;

				.status {
					width: 137rpx;
					height: 53rpx;
					background-color: rgba(0, 0, 0, .5);
					border-radius: 10rpx 0 10rpx 0;
					opacity: .82;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;

					.icon {
						width: 31rpx;
						height: 31rpx;
						display: block;
					}

					text {
						font-size: 22rpx;
						color: #fff;
						font-weight: 400;
						margin-left: 6rpx;
					}
				}

				.star {
					width: 100%;
					height: 47rpx;
					background-color: rgba(0, 0, 0, .63);
					padding: 0 12rpx;
					opacity: .82;
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;

					.icon {
						width: 29rpx;
						height: 29rpx;
						display: block;
					}

					text {
						font-size: 22rpx;
						color: #fff;
						font-weight: 400;
						margin-left: 11rpx;
					}
				}

				&>image {
					width: 93%;
					border-radius: 26rpx;
					height: 93%;
					margin: 10rpx auto;
					display: block;
				}
			}

			.black-info {
				backdrop-filter: blur(20px);
				box-shadow: inset 0px 0px 10px RGBA(163, 182, 101, 0.5);
			}

			.white-info {
				background: white;
			}

			.info {
				z-index: 1;
				position: relative;
				border-radius: 10rpx;
				position: absolute;
				left: 10rpx;
				right: 10rpx;
				bottom: 10rpx;

				.title {
					padding: 20rpx 10rpx 0 10rpx;
					font-size: 26rpx;
					color: #141519;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.subtitle {
					font-size: 22rpx;
					padding: 10rpx 10rpx 0 10rpx;
				}

				.data {
					margin: 13rpx 0;
				}

				.grade {
					color: #ff6695;
					font-weight: 600;
				}

				.black-price {
					background-color: rgba(0, 0, 0, 0.3);
					backdrop-filter: blur(20px);
				}

				.white-price {
					background: white;
				}

				.price {
					margin-top: 10rpx;
					padding: 10rpx 14rpx;
					border-radius: 10rpx;
					text-align: left;

					text {
						font-size: 30rpx;
						color: #141519;
						font-weight: bold;
					}

					text.unit {
						font-size: 14rpx;
						font-weight: 300;
					}
				}
			}
		}

		&>view:nth-child(-n+2) {
			margin-top: 0;
		}
	}

	.activities {
		width: 100%;
		margin-top: 33rpx;

		.item {
			width: 100%;
			height: 487rpx;
			background-color: #fff;
			border-radius: 20rpx;
			border: 1rpx solid #DCDCDC;
			padding: 17rpx 25rpx 0;
			margin-top: 30rpx;

			.cover {
				width: 100%;
				height: 332rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 20rpx;
				}
			}

			.title {
				font-size: 28rpx;
				color: #000;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 26rpx 0 10rpx;
			}

			.time {
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
			}
		}

		&>view:first-child {
			margin-top: 0;
		}
	}

	.go_apply2 {
		width: 130rpx;
		height: 52rpx;
		background: var(--buttonBcak); // linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
		border-radius: 26rpx;
		text-align: center;
		line-height: 52rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.renzheng_box {
		width: 100%;
		height: 88rpx;
		background-color: rgba(0, 0, 0, .3);
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		animation: easein .3s forwards;
		animation-delay: 1s;
		font-size: 28rpx;
		color: #fff;
		position: fixed;
		bottom: -200px;
		z-index: 12;
	}

	@keyframes easein {
		0% {
			bottom: -200rpx;
		}

		100% {
			bottom: 160rpx;
		}
	}

	.confirm {
		width: 524rpx;
		height: 84rpx;
		background: var(--buttonBcak); // $btn-bg;
		border-radius: 100rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
		color: #fff;
		margin: 0 auto;
	}


	.scrollClsss {
		position: fixed;
		bottom: 220rpx;
		right: -16rpx;
		z-index: 999;
		width: 120rpx;
		height: 100rpx;
	}

	.swiper_list {
		border-radius: 30rpx;
		padding: 0;
		margin: 0;

	}

	.item-border-black {
		padding: 2rpx;
		margin: 0 auto;
		background: linear-gradient(0deg, #CCA404, #FFF3D9, #76A41A);
		border-radius: 15rpx;
		border: 6rpx solid;
		border-image: linear-gradient(0deg, #CCA404, #FFF3D9, #76A41A) 15 15 15;
		clip-path: inset(0 round 15rpx);
	}

	.item-border-pup {
		padding: 2rpx;
		margin: 0 auto;
		background: linear-gradient(0deg, #f70dff, #ff63fd, #d106eb);
		border-radius: 15rpx;
		border: 6rpx solid;
		border-image: linear-gradient(0deg, #7b7fd5, #ff0066, #ffb4fe) 15 15 15;
		clip-path: inset(0 round 15rpx);
	}

	.swiper_class {
		// margin: 70rpx auto 0;
		text-align: center;
		border-radius: 20rpx;

		// height:500rpx;
		.sw_image {
			// margin: 20rpx 40rpx 20rpx 40rpx;
			width: 95%;
			height: 93%;
			border-radius: 20rpx;
		}
	}

	//轮播图

	.swiper {
		height: 320rpx;

	}

	.swiper-item {
		display: block;
		height: 270rpx;
		text-align: center;
	}

	/deep/.uni-swiper-dot {
		padding: 3rpx;
		background-color: #a1a1a1 !important;
	}

	/deep/.uni-swiper-dot-active {
		background-color: white !important;
		width: 30rpx;
		height: 10rpx;
		border-radius: 20rpx;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.swiper-container {
		width: 100%;
		height: 300px;
		/* 根据需要调整高度 */
		overflow: hidden;
		position: relative;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		position: absolute;
		transition: transform 0.5s ease;
		/* 平滑过渡 */
		backface-visibility: hidden;
		/* 防止3D翻转时的闪烁 */
	}

	/* 应用3D堆叠效果 */
	.item-0 {
		transform: rotateY(0deg) translateZ(0);
		border: 1px solid red;
	}

	.item-1 {
		transform: rotateY(-30deg) translateZ(-50px);
		border: 1px solid aqua;
	}

	.item-2 {
		transform: rotateY(30deg) translateZ(-50px);
		border: 1px solid saddlebrown;
	}

	.item-3 {
		transform: rotateY(30deg) translateZ(-50px);
		border: 1px solid saddlebrown;
	}

	/* ... 为其他图片添加样式 */

	.slide-image {
		width: 100%;
		height: 300rpx;
		// height: 100%;
		object-fit: cover;
		/* 确保图片填满整个容器 */
	}

	.center_poter {
		position: relative;
		z-index: 999;
		// width: 410px;
		// height: 520px;

	}
</style>
